import React from 'react';
import { PageHeader, Menu, Dropdown, Icon, Button, Tag, Typography, Row } from 'antd';
const { Paragraph } = Typography;

const menu = (
  <Menu>
    <Menu.Item> <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/"> 1st menu item </a> </Menu.Item>
    <Menu.Item> <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/"> 2nd menu item </a> </Menu.Item>
    <Menu.Item> <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/"> 3rd menu item </a> </Menu.Item>
  </Menu>
)

const DropdownMenu = () => {
  return (
    <Dropdown key="more" overlay={menu}>
      <Button style={{ border: 'none', padding: 0, }} >
        <Icon type="ellipsis" style={{ fontSize: 20, verticalAlign: 'top', }} />
      </Button>
    </Dropdown>
  );
};

const routes = [
  {
    path: 'index',
    breadcrumbName: 'First-level Menu',
  },
  {
    path: 'first',
    breadcrumbName: 'Second-level Menu',
  },
  {
    path: 'second',
    breadcrumbName: 'Third-level Menu',
  },
];

const IconLink = ({ src, text }) => (
  <a style={{ marginRight: 16, display: 'flex', alignItems: 'center', }} >
    <img style={{ marginRight: 8, }} src={src} alt="start" /> {text}
  </a>
);

const content = (
  <div className="content">
    <Paragraph> 蚂蚁设计将颜色系统分为两个层次：系统级颜色系统和产品级颜色系统 </Paragraph>
    <Paragraph>
      Ant Design&#x27;s design team preferred to design with the HSB color model, which makes it
      easier for designers to have a clear psychological expectation of color when adjusting colors,
      as well as facilitate communication in teams.
    </Paragraph>
    <Row className="contentLink" type="flex">
      <IconLink
        src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
        text="快速启动"
      />
      <IconLink
        src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg"
        text="产品信息"
      />
      <IconLink
        src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
        text="产品指南"
      />
    </Row>
  </div>
);

const Content = ({ children, extraContent }) => {
  return (
    <Row className="content" type="flex">
      <div className="main" style={{ flex: 1 }}>
        {children}
      </div>
      <div
        className="extra"
        style={{
          marginLeft: 80,
        }}
      >
        {extraContent}
      </div>
    </Row>
  );
}

export default class AllCapabillities extends React.Component{
  render(){
    return <>
        <PageHeader
            title="标题"
            subTitle="子标题"
            tags={<><Tag color="blue">标签</Tag><Tag color="blue">标签</Tag></>}
            extra={[
              <Button key="3">额外1</Button>,
              <Button key="2">额外2</Button>,
              <Button key="1" type="primary"> 额外3 </Button>,
              <DropdownMenu key="more" />,
            ]}
            avatar={{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }}
            // breadcrumb={{ routes }}
          >
            <Content
              extraContent={
                <img
                  src="https://gw.alipayobjects.com/mdn/mpaas_user/afts/img/A*KsfVQbuLRlYAAAAAAAAAAABjAQAAAQ/original"
                  alt="content"
                />
              }
            >
              {content}
            </Content>
          </PageHeader>
    </>
  }
} 